<template>
  <div>
    <a-spin tip="加载中..." :spinning="spinning" size="large" style="padding-bottom: 2%">
      <a-comment v-for="comment in comments">
        <a-avatar
            style="border-radius: 0"
            slot="avatar"
            src="/user.svg"
        />
        <a slot="author"
           style="color: #6d757a;    font-size: 12px; font-weight: bold;line-height: 18px;padding-bottom: 4px;padding-right: 10px;word-wrap: break-word;">
          {{ comment.commentator }}</a>
        <span v-if="content.email" slot="author">邮箱:{{ comment.email }}  </span>
        <span v-if="content.websiteUrl" slot="author">主页：{{ comment.websiteUrl }}  </span>
        <p slot="content">
          {{ comment.commentBody }}
        </p>
        <p>
          <a-tooltip slot="datetime">

            <a-tooltip placement="left" :title="comment.createTime">
              <span style="padding-right: 2%;">{{ comment.createTime_fast }}</span>
            </a-tooltip>
          </a-tooltip>
          <!--      <span key="comment-basic-like">
                  <a-tooltip title="Like">
                    <a-icon type="like" :theme="action === 'liked' ? 'filled' : 'outlined'" @click="like"/>
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    {{ likes }}
                  </span>
                </span>
                <span key="comment-basic-dislike">
                  <a-tooltip title="Dislike">
                    <a-icon
                      type="dislike"
                      :theme="action === 'disliked' ? 'filled' : 'outlined'"
                      @click="dislike"
                    />
                  </a-tooltip>
                  <span style="padding-left: '8px';cursor: 'auto'">
                    {{ dislikes }}
                  </span>
                </span>-->
          <a key="comment-basic-reply-to" @click="toggleReply(comment)">回复</a>

          <!--      <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="del({commentId:content.commentId})">
                  <a style="padding-left: 1%">删除</a>
                </a-popconfirm>-->

          <reply
              v-if="comment.isShowReply"
              @parentFun="parentFun"
              :pageNo="pageNo"
              :pageSize="pageSize"
              :content="{parentId:content.commentId,blogId:comment.blogId,commentator:comment.commentator}"></reply>
        </p>

      </a-comment>
      <div>
        <a-pagination
            style="display: inline-flex;padding-right: 1%"
            size="small"
            :total="total"
            :defaultPage="pageNo"
            :defaultPageSize="pageSize"
            :pageSizeOptions="['2', '5', '10', '50']"
            :show-total="total => `共 ${total} 条`"
            @change="onCommentPageChange"
            @showSizeChange="onCommentPageChange"
        />
        <a-button
            type="default"
            shape="circle"
            icon="reload"
            size="small"
            :loading="iconLoading"
            @click="onCommentPageChange(pageNo,pageSize)"></a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import {blogCommentPage} from "@/api";
import reply from "@/components/comment/reply";
import {getTimer} from "@/utils/util";

export default {
  name: "chikdrenCommentPage",
  components: {
    reply
  },
  props: [
    'content',
    'total'
  ],
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      total: 0,
      comments: [],
      iconLoading: false,
      isShowReply: false,
      spinning: false
    }
  },
  mounted() {
    this.comments = this.content.children
    for (let i = 0; i < this.comments.length; i++) {
      this.comments[i].createTime_fast = getTimer(this.comments[i].createTime)
    }

    this.onCommentPageChange(this.pageNo, this.pageSize);
  },
  methods: {
    onCommentPageChange(pageNo, pageSize) {
      this.pageNo = pageNo
      this.pageSize = pageSize
      const that = this
      this.spinning = true
      let param = {
        pageNo: pageNo, pageSize: pageSize, parentId: this.content.children[0].parentId, isParent: false
      }
      blogCommentPage(param).then((res) => {
        that.comments = res.data.rows
        that.total = res.data.totalRows
        this.spinning = false
        this.comments = this.comments.map(item => {
          this.$set(item, 'isShowReply', false)
          return item
        })
        for (let i = 0; i < that.comments.length; i++) {
          that.comments[i].createTime_fast = getTimer(that.comments[i].createTime)
        }
      })
    },
    toggleReply(e) {
      const nowStatu = e.isShowReply
      e.isShowReply = !nowStatu
    },
    parentFun() {
      this.onCommentPageChange(this.pageNo, this.pageSize)
    }/*,
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return ' 上一页  ';
      } else if (type === 'next') {
        return '  下一页  ';
      }
      return originalElement;
    }*/
  }
}

</script>

<style scoped>

</style>